<template>
	<div>
		<!-- 导入提示对话框 -->
		<edu-export-dialog
			:tip="$t('common.upload.professionDegreeMajor')"
			@close="closeFresh"
			ref="importRef"
			:data="importCam"
		>
			<div :style="fontStyle">{{msg}}</div>
			<div style="margin-top: 4px;font-size: 12px;color: #909399">{{errorInfo1}}</div>
			<div style="margin-top: 4px;font-size: 12px;color: #909399">{{errorInfo2}}</div>
		</edu-export-dialog>

		<edu-dialog :title="$t(title)" width="40%" ref="uploadDialog" @confirm="uploadFile">
			<el-form label-width="85px">
				<el-row>
					<el-form-item>
						<edu-upload
							ref="upload"
							:data="data"
							:before-upload="beforeAvatarUpload"
							:before-remove="beforeRemove"
							:on-success="uploadDone"
							:auto-upload="autoUpload"
							:multiple="multiple"
							:limit="limit"
							:accept="accept"
							:action="action"
							:tip="tip"
						></edu-upload>
					</el-form-item>
				</el-row>
			</el-form>
		</edu-dialog>
	</div>
</template>
<script>
import UTILS from "common/src/utils/utils";
/**
 * 上传组件
 */
export default {
	name: "EduUploadDialog",
	props: {
		title: {
			type: String,
			default: "message.import"
		},
		autoUpload: null,
		multiple: null,
		limit: null,
		accept: null,
		action: null,
		data: null,
		tip: null,
		asyncUrl: {
			type: String,
			default: null
		}
	},
	data() {
		return {};
	},
	mounted() {},
	created() {},
	methods: {
		open() {
			this.$refs.uploadDialog.open();
		},
		onOpen() {
			setTimeout(() => {
				this.$emit("open");
			}, 300);
		},
		close() {
			this.clearFiles();
			this.$refs.uploadDialog.close();
		},
		onClose() {
			this.$emit("close");
		},
		clearFiles() {
			this.$refs.upload.clearFiles();
		},
		uploadFile() {
			if (this.$refs.upload.isEmpty()) {
				this.$message({
					type: "info",
					message: this.$t("message.selectFilePlease")
				});
				return;
			}
			this.$refs.upload.submit();
		},
		uploadDone(res, file, fileList) {
			if (res.code == 200) {
				this.msg = "";
				this.$refs.uploadDialog.close();
				this.importCam = null;
				this.$refs.importRef.open();
				this.delayImportRequest(res.data.key);
			} else {
				this.$message({
					type: "error",
					message: this.$t(
						"culture.profession.uploadFileParsingError"
					)
				});
				this.clearFiles();
				this.importButton = false;
			}
			//this.$emit("on-success");
		},
		async delayImportRequest(key) {
			await new Promise(resolve => setTimeout(resolve, 5000));
			getimportStatus(key)
				.then(res => {
					this.importCam = res.data;
					if (res.code == 200 && res.data.status) {
						if (res.data.success) {
							this.$message({
								type: "success",
								message: this.$t(
									"common.upload.uploadCompleted"
								)
							});
							this.importCam = {
								doneCount: 1,
								updateCount: 1,
								total: 2
							};
						} else {
							this.importCam = {
								doneCount: 1,
								updateCount: 1,
								total: 2
							};
							this.$refs.importRef.close();
							this.$message({
								type: "error",
								message: res.data.msg
							});
							// this.fontStyle = 'font-size: 15px;color: red'
							// this.msg = res.data.msg;
						}
					} else {
						this.delayImportRequest(key, loading);
					}
				})
				.catch(ex => {
					this.delayImportRequest(key, loading);
				});
		},
		onError(err, file, fileList) {
			let msg = JSON.parse(err.message);
			this.$message({
				type: "error",
				message: msg.message
			});
		},

		beforeRemove(file, fileList) {
			return this.$confirm(
				this.$t("common.upload.remove") + ` ${file.name}？`
			);
		},
		beforeAvatarUpload(file) {
			let extName = file.name
				.substring(file.name.indexOf(".") + 1)
				.toLowerCase()
				.trim();
			if (!(extName === "xls" || extName === "xlsx")) {
				this.$message({
					type: "error",
					message: this.$t("common.upload.unSupportesFileType")
				});
				this.clearFiles();
				return;
			}
			if (!(file.size / 1024 / 1024 < 3)) {
				this.$message({
					type: "error",
					message: this.$t("common.upload.sizeLimit3M")
				});
				this.clearFiles();
				return;
			}
		},
		closeFresh() {
			this.onSubmit();
		}
	}
};
</script>

<style lang="scss">
</style>
